<template>
  <div>
    <div class="group-operation-title-box border">
      <div class="group-operation-title">
        <div class="large-title">月执行状态</div>
        <div class="legend-box">
          <div class="legend-title">图例</div>
          <div class="legend-item-box">
            <div class="legend-item">
              <div class="icon color-C2F4CB"></div>
              <div class="legend-item-title">实际执行符合计划</div>
            </div>
            <div class="legend-item">
              <div class="icon color-FDC9C9"></div>
              <div class="legend-item-title">实际执行未达到计划</div>
            </div>
            <div class="legend-item">
              <div class="icon color-DFFFE6"></div>
              <div class="legend-item-title">预测符合计划</div>
            </div>
            <div class="legend-item">
              <div class="icon color-FFF1F1"></div>
              <div class="legend-item-title">预测未达到计划</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in dataList" :key="index">
      <div class="group-operation-small-title-box">
        <div class="group-operation-title">
          <div class="title">{{ item.typeShow }}：</div>
          <div class="color-FF0000">{{ item.practicalPrice | formatMoney }}</div>
        </div>
        <div class="group-operation-title">
          <div class="title">完成全年计划：</div>
          <div class="color-FF0000">{{ item.completeness }}</div>
        </div>
      </div>
      <monthly-table v-if="selectTime" :select-time="selectTime" :tableTypeShow="item.typeShow || ''" :table-data="item.month || []"></monthly-table>
    </div>
  </div>
</template>
<script>
import monthlyTable from './monthlyTable';
import { apiMonthExecutePlanStatistics } from '../../groupOperation/api/index';
export default {
  props: {
    selectTime: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await apiMonthExecutePlanStatistics({
        planYear: this.selectTime.substr(0, 4),
        planMonth: this.selectTime.substr(5, 2) > 9 ? this.selectTime.substr(5, 2) : this.selectTime.substr(6, 1),
        primaryKey: this.$route.query.planKey ? this.$route.query.planKey : null,
      });
      this.dataList = res.rows || [];
    },
  },
  components: {
    monthlyTable,
  },
};
</script>
<style lang="scss">
.group-operation-small-title-box {
  margin-top: 20px;
  height: 40px;
  padding: 10px 0;
}
</style>